<template>
	<view class="whiteA">
		<view>
			<view>
				<image src="../../static/moren.png" mode="" class="imageA"></image>
			</view>
			<text class="whiteA-dl">点击登录</text>
		</view>
		<text class="whiteA-d2">欢迎来到袁隆平杂交水稻科学园</text>
	</view>

	<view class="whiteB">

		<uni-row>
			<uni-col :span="23">
				<view class="yuyue">
					预约记录
				</view>
			</uni-col>
			<uni-col :span="1">
				<view @click="tosucceed">
					<image src="../../static/next.png" mode="" class="next"></image>
				</view>
			</uni-col>
		</uni-row>
		<view id="reservation-info">
			<!-- 默认隐藏的表格 -->
			<table
				v-if="reserve?.type || reserve?.name || reserve?.time || groupReserve?.time || groupReserve?.type || groupReserve?.name"
				class="info-table">
				<tr>
					<td class="item-label">预约类型：</td>
					<td class="item-label">主预约人姓名：</td>
					<td class="item-label">预约时间：</td>
				</tr>
				<tr v-if="reserve?.type || reserve?.name || reserve?.time">
					<td class="item-value">{{ reserve?.type }}</td>
					<td class="item-value">{{ reserve?.name }}</td>
					<td class="item-value">{{ reserve?.time }}</td>
				</tr>
				<tr v-if=" groupReserve?.time || groupReserve?.type || groupReserve?.name">
					<td class="item-value">{{ groupReserve?.type }}</td>
					<td class="item-value">{{ groupReserve?.name }}</td>
					<td class="item-value">{{ groupReserve?.time }}</td>
				</tr>
			</table>
			<!-- 默认显示的“暂无预约记录”信息 -->
			<view v-else class="lu">
				<view>
					<image src="../../static/img.png" mode="" class="imageB"></image>
				</view>
				<view class="nolu">
					暂无预约记录
				</view>
			</view>
		</view>
	</view>
	<view class="">
		<image src="../../static/xiaohui.png" mode="" class="xiaohui"></image>
	</view>
	<view>
		<text class="jszc">技术支持：电子科技大学</text>
	</view>

</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,

	} from 'vue';
	import {
		onShow,
		onTabItemTap
	} from '@dcloudio/uni-app';


	const reserve = ref();
	let groupReserve = ref({});
	const reserveRecordInfo = ref({});
	const reserveRecords = ref({});
	const initReserveRecord = () => {
		reserve.value = {};
		groupReserve.value = {}; // 清空预约记录信息
	};

	onShow(() => {
		// 从全局数据中获取预约记录信息
		const app = getApp();
		if (app.globalData.reserveRecordInfo) {
			reserveRecordInfo.value = app.globalData.reserveRecordInfo;
			console.log('Received reserve record info:', reserveRecordInfo.value);
			reserve.value = {
				type: reserveRecordInfo.value.type , // 假设类型是预约类型
				name: reserveRecordInfo.value.type == '个人预约' ? reserveRecordInfo.value.personalInfo.name : reserveRecordInfo.value.groupInfo.name , // 主预约人姓名
				time: `2024年6月${reserveRecordInfo.value.type == '个人预约' ? reserveRecordInfo.value.personalInfo.selectedDate : reserveRecordInfo.value.groupInfo.selectedDate}日${reserveRecordInfo.value.type == '个人预约' ? reserveRecordInfo.value.personalInfo.selectedTime : reserveRecordInfo.value.groupInfo.selectedTime}`, // 预约时间
			};
			console.log(reserve.value)
		} 
		if (app.globalData.reserveRecords) {
			reserveRecords.value = app.globalData.reserveRecords;
			groupReserve.value = {
				type: reserveRecords.value.type,
				name: reserveRecords.value.groupInfo.name, // 假设这里有团队名称
				time: `2024年6月${reserveRecords.value.groupInfo.selectedDate}日${reserveRecords.value.groupInfo.selectedTime}`, // 预约时间
			};
		}
		 
		if(!app.globalData.reserveRecords && !app.globalData.reserveRecordInfo) {
			initReserveRecord(); // 如果没有全局数据，则初始化预约记录
		}
		console.log(reserve.value)
	});

	function tosucceed() {
		// 创建一个包含 reserveRecordInfo 和 reserveRecords 的对象
		const combinedData = {
			reserveRecordInfo: reserveRecordInfo.value,
			reserveRecords: reserveRecords.value
		};

		// 将对象转换为字符串形式，以便在URL中传递
		const dataStr = JSON.stringify(combinedData);

		// 跳转到succeed页面，并在URL中附加参数
		uni.navigateTo({
			url: `/pages/succeed/succeed?combinedData=${encodeURIComponent(dataStr)}`
		})
	}
</script>

<style>
	.whiteA {
		left: 15px;
		top: 30px;
		width: 90%;
		height: 148px;
		background: #FFFFFF;
		border-radius: 12px;
		text-align: center;
		/* 水平居中 */
		padding: 10px;
		box-sizing: border-box;
		z-index: 1;
		position: relative;
		/* 确保子元素能够相对于父容器定位 */
	}

	.whiteB {
		left: 15px;
		top: 50px;
		width: 90%;
		height: 400px;
		background: #FFFFFF;
		border-radius: 12px;

		padding: 10px;
		box-sizing: border-box;
		z-index: 1;
		position: relative;
	}

	.whiteA-dl {
		position: absolute;
		top: 90px;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 60px;
		height: 21px;
		font-family: PingFangSC-Medium;
		font-weight: 700;
		font-size: 15px;
		color: #000000;
		line-height: 21px;
	}

	.whiteA-d2 {
		position: absolute;
		top: 110px;
		left: 50%;
		transform: translateX(-50%);
		width: 168px;
		height: 17px;
		opacity: 0.75;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #323232;
		line-height: 17px;
	}

	.imageA {
		width: 50px;
		height: 50px;

	}

	.image-container {
		position: absolute;
		left: 42px;
		top: 220px;
		z-index: 2;
	}

	.yuyue {

		position: absolute;
		font-family: PingFangSC-Medium;
		font-weight: 700;
		font-size: 17px;
		color: #323232;
		letter-spacing: 0;
	}

	.next {
		position: absolute;
		left: 93%;
		width: 12px;
		height: 20px;
	}

	.nolu {
		top: 280px;
		left: 40%;
		position: absolute;
		opacity: 0.7;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #393939;
		letter-spacing: 0;
	}

	.imageB {
		position: absolute;
		width: 141px;
		height: 130px;
		top: 140px;
		left: 30%;
	}

	.xiaohui {
		position: absolute;
		top: 650px;
		width: 80px;
		height: 30px;
		left: 40%;
	}

	.jszc {
		position: absolute;
		bottom: 15px;
		/* 从底部向上10px的位置 */
		left: 30%;
		/* 从左边界的50%开始 */
		opacity: 0.7;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 13px;
		color: #393939;
	}

	.info-table {
		position: absolute;
		top: 60px;
		margin: 5px;
		width: 92%;
		border-collapse: collapse;
	}

	.info-table,
	.info-table td {
		border: 1px solid #ddd;
		/* 添加竖线和横线 */
	}

	.info-table td {
		padding: 8px;
		text-align: center;
	}

	.item-label {
		font-weight: bold;
	}
</style>